<template>
    <div>
        <div class="text">
            <span class="title">{{data.title}}</span>
            <span class="small-title">发布于 {{data.date}}    |   {{data.name1}}（{{data.name1}}）|   阅读（{{data.reading}}）</span>
            <p>{{data.text}}</p>
            <button class="layui-btn layui-btn-xs" @click="hide">
                <i class="layui-icon">&#xe603;</i>
                返回
            </button>
        </div>
        <div class="images">
            <img v-for="item in data.img" :key="item.id" :src=item alt="" @click="largeImg(item)">
        </div>
        <table class="layui-table">
            <thead>
            <tr>
                <th>文件名</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="file"></tbody>
        </table>
    </div>
</template>
<script>
    import $ from 'jquery'
    export default {
        name: "announcementDetail",
        props:['urls','id'],
        data(){
            return {
                data:{}
            }
        },
        created:function(){
            var _this = this;
            $.ajax({
                url:_this.urls.announcementManagement.list,
                type:'post',
                data:{id:_this.id},
                success:function(res){
                    _this.data = res.data;
                    _this.data.name1 = _this.data.account_info.name;
                    _this.data.name2 = _this.data.account_info.role_info.rolename;
                    if(res.data.files.length !==0)
                        for(var j=0,file =res.data.files;j<file.length;j++){
                            var splitLast = file[j].split(/\./g);//截取尾部格式
                            var last = splitLast[splitLast.length-1];
                            let tr = $(['<tr id="upload-'+ j +'">'
                                ,'<td>'+"文件"+(j+1)+"."+last +'</td>'
                                ,'<td>'
                                , '<a href="'+file[j]+'" type="button" class="layui-btn layui-btn-xs download-file color" target="_blank">下载</a>'
                                ,'</td>'
                                ,'</tr>'].join(''));
                            $('#file').append(tr);
                        }
                    else
                        $('table').hide();
                    layui.use('table',function(){})
                },
                error(msg){
                    console.error(msg)
                }
            })
        },
        computed:{},
        methods:{
            hide(){
                this.$emit('detail',false)
            },
            largeImg(img){
                var image = '<img src="'+img+'" />';
                layui.use('layer',function(){
                     var layer = layui.layer;
                     layer.open({
                         type:1,
                         area:['550px','650px'],
                         content:image
                     })
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../static/css/style.less";
    .text{
        color: @c3;
        padding:28px 35px 32px;
        .pr;
        .title{
            font-size: 18px;
        }
        .small-title{
            font-size: 13px;
            color: @c9;
        }
        p{
            margin-top: 22px;
            line-height: 25px;
        }
        button{
          .pa;
            top: 29px;
            right: 35px;
            .blg(to right, #cd1f5c, #e11e27);
        }
    }
    .images{
        width: 100%;
        .df;
        flex-wrap: wrap;
        padding: 0 35px;
        img{
            width: 190px;
            height: 130px;
            background-color: @c9;
            margin: 15px;
            cursor: pointer;
        }
    }
    table{
        width: 30%;
        thead{
            th{
                height: 40px;
                padding:9px 15px;
            }
        }
    }
</style>